/* *代表所以标签 */
/* display属性用于指定一个元素在页面中的显示方式 */
*{
  margin: 0;
  padding: 0;
}
body{
  background-color: #f2b155B0;
}
.page{
  display: flex;
  align-items: center;
  height:  100vh;
}

.home{
  width: 1408px; 
  /* 居中 */
  margin: auto;
}
.logo h1{
  font-size: 96px;
  color: #fff;
}
.root2 {
  /* 弹性布局，变得在同一行 */
  display: flex;
  justify-content: space-between;

  margin-top: 5vh;
  margin-bottom: 14.5vh;
}

.hc-nav{
  /* 弹性布局，变得在同一行 */
  display: flex;
  /* 换行样式 */
  flex-wrap: wrap;
  /* 垂直居中并对其 */
  align-content: space-between;
  width: 170px;
  height: 605px;
  background: #fff;
  border-radius: 10px;
  /* 设置内边距 */
  padding: 40px 25px;
  /* 去掉所有的内外边距，以及边框的长度 */
  box-sizing: border-box;
}

.hc-nav a{
  /* 弹性布局，变得在同一行 */
  display: flex;
  /* 换行样式 */
  flex-wrap: wrap;
  /* 水平居中显示 */
  justify-content: center;
  align-content: center;
  width: 120px;
  height: 100px;
  background: #f2b155B0;
  border-radius: 10px;
  color: #000000;
  font-size: 16px;
  /* 去掉下划线 */
  text-decoration: none;
}

/* 鼠标移到链接上的特殊样式 */
.hc-nav a:hover{
  background: #f2b155;
}

.hc-nav a img{
  width: 50px;
  height: 50px; 
}

.hc-nav a span{
  width: 100%;
  text-align: center;
  margin-top: 5px;
}

.hc-text{
  /* 弹性布局，变得在同一行 */
  display: flex;
  width: 1182px;
  height: 605px;
  background: #fff;
  /* 设置内边距 */
  padding: 45px;
  /* 去掉所有的内外边距，以及边框的长度 */
  box-sizing: border-box;
  /* 设置边框弧度 */
  border-radius: 10px;
}

.hc-text img{ 
  width: 420px;
  height: 515px;
}

.hc-text-con{
  margin-left: 45px; 
}

.hc-text-con h3{ 
  color: #333333;
  font-size: 26px;
}

.hc-text-con p{ 
  color: #666666;
  font-size: 16px;
  margin-top: 20px;
  line-height: 30px;
}

.footer p{ 
  color: #fff;
  font-size: 16px;
  text-align: center;
}

.header{ 
  background: #ffffff73;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 10%;
}

.logo h3{
  color: #f2b155;
  font-size: 36px;
}

/* 菜单 */
.nav a{
  color: #555555;
  text-decoration: none; 
  margin-left: 81px;
  font-size: 18px;
}

.nav a:hover{
  color: #000;
  font-weight: 600;
}

.nav .active{
  color: #000;
  font-weight: 600;
}

/* 个人介绍 */
.about{
  box-sizing: border-box; 
  width: 1280px;
  background: rgba(255, 255, 255, 0.3);
  /* 上右下左 */
  margin: 50px auto 0 auto;
  padding: 5px 39px 45px 39px;
  border-radius: 10px;
}

.about-title{ 
  color: #333333;
  font-size: 24px;
  /* 下侧外边距 */
  margin-bottom: 20px;
  margin-top: 50px;
}

.about-con{ 
  display: flex;
  justify-content: space-between;

}

.about-con img{
  border-radius: 10px;
  margin-left: 51px;
  margin-top: 0;
}

.about-text1 p{
  color: #555555;
  margin-bottom: 10px;
  font-size: 21px;
}
/* 个人爱好 */
.about-like{ 
  margin-top: 50px;
}

.about-text2 span{ 
  /* span是行内元素，必须要指定为块才可以进行块操作 */
  display: inline-block;
  color: #555555;
  /* 设置块的高度宽度 */
  width: 120px;
  height: 50px;
  /* 设置块背景颜色 */
  background-color: #29dfec;
  /* 设置文字颜色 */
  color: #fff;
  border-radius: 10px;
  margin-right: 100px;
  /* 文字行高 */
  line-height: 45px;
  text-align: center;
}

/* 子集选择器 */
.about-text2 span:nth-child(2){ 
  background-color: #f2b155;
}
.about-text2 span:nth-child(3){ 
  background-color: #db1515;
}
.about-text2 span:nth-child(4){ 
  background-color: #f50fb0;
}
.about-text2 span:nth-child(5){ 
  background-color: #1c2af8;
}

/* 个人技能 */
.about-text3{
  display: flex; 
  flex-wrap: wrap;
}
.about-text3 img{
  width: 140px; 
  height: 140px;
  margin-right: 100px;
}